﻿@model ORM.Business.Models.Entities.Guide
@{
    ViewBag.Title = "Tạo Hướng Dẫn Mới";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/ckeditor/adapters/jquery.js")"></script>
<table class="contentBox" width="100%">
    <tr>
        <th class="boxTitle">
            Tạo Hướng Dẫn Mới<span id="guideNavigator"></span>
        </th>
    </tr>
    <tr>
        <td style="vertical-align: top">
            @if (!User.Identity.IsAuthenticated)
            {
                <b>Bạn phải đăng nhập để sử dụng chức năng này</b>
                @Html.Partial("_LogOnPartial")
            }
            else
            {

                using (Html.BeginForm())
                {
                @Html.ValidationSummary(true)
                <div class="editor-label">
                    Loại Bài <span style="color: red;">*</span>
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.GuideTypeId, (IEnumerable<SelectListItem>)(ViewBag.GuideType), new { id = "GuideTypeId", @style = "width:200px;" })
                    @Html.ValidationMessageFor(model => model.GuideTypeId)
                </div>
        
                <table width="100%" style="padding-left: 0px">
                    <colgroup>
                        <col span="1" style="width: 25%;" />
                        <col span="1" style="width: 25%;" />
                        <col span="1" style="width: 50%;" />
                    </colgroup>
                    <tr>
                        <td style="padding-left: 0px">
                            <div class="editor-label">
                                Loại Thiết Bị <span style="color: red;">*</span>
                            </div>
                            <div class="editor-field">
                                @Html.DropDownList("Device_Name", null, "", new { @style = "width:200px;" })
                            </div>
                        </td>
                        <td>
                            <div class="editor-label">
                                Nhà Sản Xuất <span style="color: red;">*</span>
                            </div>
                            <div class="editor-field">
                                @Html.DropDownList("Manufacturer_Name", null, "", new { @style = "width:200px;"})
                            </div>
                        </td>
                        <td style="padding-top: 10px">
                            <div class="editor-label">
                                Đời Máy <span style="color: red;">*</span>
                            </div>
                            @if (Model != null && Model.ModelID != null)
                            {
                                if (Model.ModelID != null)
                                {
                                <div class="editor-field">
                                    @Html.DropDownListFor(model => model.ModelID, (IEnumerable<SelectListItem>)ViewData["Model_Name"], new { id = "ModelID", @style = "width:200px;" })
                                    @Html.ValidationMessageFor(model => model.ModelID)
                                </div>
                                }

                            }
                            else
                            {
                         
                                <div class="editor-field">
                                    @Html.DropDownListFor(model => model.ModelID, Enumerable.Empty<SelectListItem>().OrderBy(m => m.Text), "", new { id = "ModelID", @style = "width:200px;" })
                                    @Html.ValidationMessageFor(model => model.ModelID)
                                </div>
                            }
                            <div class="editor-field">
                            </div>
                        </td>
                    </tr>
                </table>
                <span style="font-style: italic; font-size: 11px; color: gray">(Hướng dẫn: Hãy chọn
                    loại thiết bị và tên nhà sản xuất trước, sau đó hệ thống sẽ lọc ra các đời máy tương
                    ứng)</span><br />
                <div class="editor-label">
                    Tiêu Đề Bài Viết <span style="color: red;">*</span>
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Title, new { @style = "width:71%" })<br />
                    @Html.ValidationMessageFor(model => model.Title)
                </div>
                <div class="editor-label">
                    Mô Tả Ngắn <span style="color: red;">*</span>
                </div>
                <div class="editor-field">
                    @Html.TextAreaFor(model => model.TitleSearch, new { @style = "width:71%; height: 100px" })<br />
                    @Html.ValidationMessageFor(model => model.TitleSearch)
                </div>        
                <div class="editor-label">
                    Nội Dung <span style="color: red;">*</span>
                </div>
                <div class="editor-field">
                    @Html.TextAreaFor(model => model.ContentHtml, new { @id = "ckeditor" })<br />
                    @Html.ValidationMessageFor(model => model.ContentHtml)
                </div>
                <br />
       
        
                <div style="float: right">
                    <table>
                        <tr>
                            <td>
                                <input type="submit" id="btnSubmitGuide" value="Đăng Bài" style="width: 120px; height: 27px;" />
                            </td>
                            <td>
                                <input type="button" id="btnCancelCreate" value="Huỷ Tạo" style="width: 100px; height: 25px;
                                    font-size: 13px" />
                            </td>
                        </tr>
                    </table>
                </div>
            
                }
            }
        </td>
    </tr>
</table>
<script type="text/javascript">
//    $("#Manufacturer_Name").attr('disabled', 'disabled');
//    $("#ModelID").attr('disabled', 'disabled');

    CKEDITOR.replace('ckeditor',
        {
            filebrowserImageBrowseUrl: '/Scripts/ckfinder/ckfinder.html?type=Images',
            filebrowserImageUploadUrl: '/Scripts/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
            removePlugins : 'elementspath',
            height: 600,
        });
    $('#btnSubmitGuide').click(function() {
        for (var instanceName in CKEDITOR.instances) {
            var string = CKEDITOR.instances[instanceName].getData();
            string = string.replace(/<\/?[^>]+(>|$)/g, "");
            string = string.replace(/[&]nbsp[;]/gi," ");
            if(string.trim() != "") {
                CKEDITOR.instances[instanceName].updateElement();
            }            
        }
    });
    $('#Manufacturer_Name').change(function () {
        var selectedManfacturerId = $(this).val();
         if(selectedManfacturerId == null) {
            selectedManfacturerId = 0;
        }
        var selectedDeviceId = $('#Device_Name').val();
        $.getJSON('@Url.Action("ManufacturerNameChange")', { Manufacturer_Id: selectedManfacturerId, Device_Id: selectedDeviceId }, function (models) {
            var modelsSelect = $('#ModelID');
            modelsSelect.empty();
            $.each(models, function (index, model) {
                modelsSelect.append($('<option/>', {
                    value: model.Id,
                    text: model.Name
                }));
            });
        });
        return;
    });
    $('#Device_Name').change(function () {
        var selectedDeviceId = $(this).val();
        if(selectedDeviceId != 0) {
//                $("#Manufacturer_Name").removeAttr('disabled');
//    $("#ModelID").removeAttr('disabled');
             $.getJSON('@Url.Action("UpdateManufacturerList")', {Device_Id: selectedDeviceId }, function(models) {
            var modelsSelect = $('#Manufacturer_Name');
            modelsSelect.empty();            
            $.each(models, function(index, model) {
                modelsSelect.append($('<option/>', {
                    value: model.Id,
                    text: model.Name
                }));
            });
            $('#Manufacturer_Name').change();
        });
        }        
        if(selectedDeviceId == 0) {
            var manufacturersSelect = $('#Manufacturer_Name');
            manufacturersSelect.empty();  
            var modelsSelect = $('#ModelID');
            modelsSelect.empty();  
//        $("#Manufacturer_Name").attr('disabled', 'disabled');
//    $("#ModelID").attr('disabled', 'disabled');
        }
        return;
       
    });
    $('#btnCancelCreate').click(function() {
        $(document.createElement('div'))
            .attr({title: 'Fixtech.vn', 'class': 'alert'})
            .html("Bạn có chắc muốn huỷ tạo hướng dẫn này?")
            .dialog({
                buttons: {"Xác Nhận": function() {
                    window.location.href = "/Guide/Index";
                    $(this).dialog('close');
                }, "Quay Lại": function(){$(this).dialog('close');}},
                close: function(){$(this).remove();},
                draggable: true,
                modal: true,
                resizable: false,
                width: 500,
                open: function(event, ui) {
                    $("button").blur();
                }
            });
    });
</script>
